<template>
  <div style="height:100%;width:100%;position:relative;">
      <rm-layout-top splitcolor="#F8F8FF" :splitwidth="0" :fixsize="40" :canDrag="false">
          <template v-slot:fix>
              <div style="border: 1px solid #ccc;height:36px">
                  <table>
                      <tr>
                          <td style="width: 80px">系统代号</td>
                          <td style="width: 160px">
                              <el-select v-model="sysno" @change="InitPage">
                                  <el-option v-for="item in sysOption" :key="item.prgcode" :value="item.prgcode" :label="item.prgname"></el-option>
                              </el-select>
                          </td>
                          <td style="width: 1500px"></td>
                          <td style="text-align:left">
                              <el-button @click="SetFirst($refs.MiddlexTable)">首位</el-button>
                          </td>
                          <td style="text-align:left">
                              <el-button @click="SetUp($refs.MiddlexTable)">上移</el-button>
                          </td>
                          <td style="text-align:left">
                              <el-button @click="SetDown($refs.MiddlexTable)">下移</el-button>
                          </td>
                          <td style="text-align:left">
                              <el-button @click="SetLast($refs.MiddlexTable)">末位</el-button>
                          </td>
                          <td style="text-align:left">
                              <el-button @click="resort($refs.MiddlexTable)">默认顺序</el-button>
                          </td>
                          <td>
                              <el-button @click="SaveMenu">保存</el-button>
                          </td>
                      </tr>
                  </table>

              </div>
          </template>
          <div style="height:100%;">
              <rm-layout-right splitcolor="white" movingcolor="#CCFFFF" :splitwidth=3 :fixsize=600>
                  <template v-slot:fix>
                      <!--可选菜单-->
                      <div style="height: 100%">
                          <vxe-table :loading="loading" :data.sync="rightmenudata" @cell-dblclick="DblSelmenu" border fit :keyboard-config="keyConfig" height="auto" header-align="center" highlight-current-row highlight-hover-row ref="RightxTable" resizable show-header-overflow="tooltip" size="mini" stripe>
                              <vxe-table-column field="prgcode" title="程序代号" width="80" sortable> </vxe-table-column>
                              <vxe-table-column field="seq" title="序号" width="60" sortable align="center"> </vxe-table-column>
                              <vxe-table-column field="prgname" title="程序名称" width="160" sortable> </vxe-table-column>
                              <vxe-table-column field="classlevel" title="级别" width="60" sortable align="center"> </vxe-table-column>
                              <vxe-table-column field="parentcode" title="父节点" width="80" sortable> </vxe-table-column>
                              <vxe-table-column field="allpath" title="全路径" width="120" sortable> </vxe-table-column>
                              <vxe-table-column field="havechild" title="子节点" width="100" sortable align="center"> </vxe-table-column>
                              <vxe-table-column field="icon" title="图标" width="160" sortable align="center"> </vxe-table-column>
                              <vxe-table-column field="comments" title="备注" width="160" sortable> </vxe-table-column>
                          </vxe-table>
                      </div>
                  </template>
                  <!--已选择菜单-->
                  <rm-layout-left splitcolor="white" movingcolor="#CCFFFF" :splitwidth=3 :fixsize=205>
                      <template v-slot:fix>
                          <div style="width: 100%;height: 100%">
                              <vxe-table :loading="loading" :data.sync="leftmenudata" @current-change="LeftTableChange" border fit :keyboard-config="keyConfig" height="auto" header-align="center" highlight-current-row highlight-hover-row ref="LeftxTable" resizable show-header-overflow="tooltip" size="mini" stripe>
                                  <vxe-table-column field="prgname" title="目录名称" width="80" sortable> </vxe-table-column>
                                  <vxe-table-column field="prgcode" title="程序代号" width="60" sortable> </vxe-table-column>
                                  <vxe-table-column field="seq" title="序号" width="60" sortable> </vxe-table-column>
                              </vxe-table>
                          </div>
                      </template>
                      <div style="width: 100%;height: 100%">
                          <vxe-table :loading="loading" :data.sync="middlemenudata" @current-change="MiddleTableChange" @cell-dblclick="DblDelmenu" border fit :keyboard-config="keyConfig" height="auto" header-align="center" highlight-current-row highlight-hover-row ref="MiddlexTable" resizable show-header-overflow="tooltip" size="mini" stripe>
                              <vxe-table-column field="prgname" title="程序名称" width="160" sortable> </vxe-table-column>
                              <vxe-table-column field="seq" title="序号" width="40" sortable> </vxe-table-column>
                              <vxe-table-column field="prgcode" title="程序代号" width="80" sortable> </vxe-table-column>
                              <vxe-table-column field="userno" title="用户代号" width="80" sortable> </vxe-table-column>
                              <vxe-table-column field="parentprgcode" title="上级菜单" width="80" sortable> </vxe-table-column>
                          </vxe-table>
                      </div>
                  </rm-layout-left>
              </rm-layout-right>

          </div>
      </rm-layout-top>
  </div>
</template>

<script>
import XEUtils from "xe-utils";
export default {
  name: "MNG194",
  data() {
      return {
          sysno: "",
          sysOption: [],
          keyConfig: {
              isArrow: true,
              isDel: true,
              isTab: true,
              isEdit: true
          },
          tableData: [],
          tableDataAll: [],
          loading: false,
          currentindex: 0,
          menudata: [],
          leftmenudata: [],
          middlemenudata: [],
          rightmenudata: [],
          changeRecordset: []
      };
  },
  created() {
      this.InitPage();
  },
  computed: {},
  mounted() {
      // this.queryData(); //初始化主列表
  },
  updated() {},
  methods: {
      InitPage() {
          this.$tool
              .request({
                  url: "MNG/MNG1/MNG194",
                  method: "post",
                  data: {
                      action: "InitPage",
                      sysno: this.sysno
                  }
              })
              .then(res => {
                  if (!res.hasOwnProperty("errcode")) {
                      this.sysOption = res.sysnos;
                      this.changeRecordset = [];
                      if (this.sysOption && this.sysOption.length > 0) {
                          if (this.sysno == "") this.sysno = this.sysOption[0].prgcode;
                          this.DealresData(res);
                      }
                  }
              })
              .catch(err => {});
      },
      DealresData(res) {
          this.leftmenudata = res.allmenu.filter(item => item.classlevel == "2");
          if (this.leftmenudata.length > 0) {
              var selectdata = this.leftmenudata[0];
              this.middlemenudata = res.menu.filter(item => item.parentprgcode == selectdata.prgcode);
              this.rightmenudata = res.allmenu.filter(item => item.parentcode.indexOf(selectdata.prgcode) > -1);
              this.tableData = res.menu;
              this.tableDataAll = res.allmenu;
              this.$nextTick(() => {
                  this.$refs.LeftxTable.setCurrentRow(selectdata);
              });
          }
      },
      LeftTableChange({ row }) {
          this.middlemenudata = this.tableData.filter(item => item.parentprgcode == row.prgcode);
          this.rightmenudata = this.tableDataAll.filter(item => item.parentcode.indexOf(row.prgcode) > -1);
          this.JudgeChange();
      },
      MiddleTableChange({ row }) {
          this.currentindex = this.$refs.MiddlexTable.getRowIndex(row);
      },
      JudgeChange() {
          for (let i = 0; i < this.$refs.MiddlexTable.tableData.length; i++) {
              this.$refs.MiddlexTable.tableData[i].seq = (i + 1) * 10;
          }
          var leftrow = this.$refs.LeftxTable.getCurrentRow();
          var records = this.$refs.MiddlexTable.getRecordset();
          var findrow = this.changeRecordset.find(item => item.sysno == leftrow.prgcode);
          if (findrow) {
              if (JSON.stringify(findrow.urecobj) != JSON.stringify(records)) {
                  var idnex = this.changeRecordset.indexOf(findrow);
                  this.changeRecordset[idnex] = { sysno: leftrow.prgcode, urecobj: records };
              }
          } else if (records.insertRecords.length > 0 || records.removeRecords.length > 0 || records.updateRecords.length > 0) {
              this.changeRecordset.push({ sysno: leftrow.prgcode, urecobj: records });
          }
      },
      SaveMenu() {
          this.JudgeChange();
          this.$tool
              .request({
                  url: "MNG/MNG1/MNG194",
                  method: "post",
                  data: {
                      action: "Savemenu",
                      urec: this.changeRecordset
                  }
              })
              .then(res => {
                  if (res.errcode == "1") {
                      this.$message.success("保存成功!");
                      this.InitPage();
                  } else {
                      this.$alert("保存失败!" + res.msg);
                  }
              })
              .catch(err => {});
      },
      DblSelmenu({ row }) {
          var leftrow = this.$refs.LeftxTable.getCurrentRow();
          var data = this.$refs.MiddlexTable.tableFullData;
          var seq = 0;
          if (data.length > 0) seq = data[data.length - 1].seq;
          seq = seq - 0 + 10;
          if (!data.find(item => item.prgcode == row.prgcode) && !data.find(item => item.prgcode == row.realprgcode) && row.classlevel == "4") {
              this.$refs.MiddlexTable.insertAt({ prgname: row.prgname, prgcode: row.prgcode, seq: seq, userno: "Default", parentprgcode: leftrow.prgcode }, -1);
          }
      },
      DblDelmenu({ row }) {
          this.$confirm("您是否确定要删除当前记录?", "提示", {
              confirmButtonText: "确定",
              cancelButtonText: "取消",
              focusCancelButton: true,
              type: "warning"
          }).then(() => {
              this.$refs.MiddlexTable.remove(row);
          });
      },
      SetFirst(table) {
          if (table.getCurrentRow()) {
              var currentrow = table.getCurrentRow();
              table.tableData = table.tableData.filter(item => item._XID != currentrow._XID);
              table.tableData.splice(0, 0, currentrow);
              this.currentindex = 0;
              this.$nextTick(() => {
                  table.setCurrentRow(currentrow);
                  table.scrollToRow(currentrow);
              });
          }
      },
      SetUp(table) {
          if (this.currentindex > 0) {
              var currentrow = table.getCurrentRow();
              table.tableData = table.tableData.filter(item => item._XID != currentrow._XID);
              table.tableData.splice(this.currentindex - 1, 0, currentrow);
              this.currentindex -= 1;
              this.$nextTick(() => {
                  table.setCurrentRow(currentrow);
                  table.scrollToRow(currentrow);
              });
          }
      },
      SetDown(table) {
          if (this.currentindex >= 0 && this.currentindex < table.tableData.length - 1) {
              var currentrow = table.getCurrentRow();
              table.tableData = table.tableData.filter(item => item._XID != currentrow._XID);
              table.tableData.splice(this.currentindex + 1, 0, currentrow);
              this.currentindex += 1;
              this.$nextTick(() => {
                  table.setCurrentRow(currentrow);
                  table.scrollToRow(currentrow);
              });
          }
      },
      SetLast(table) {
          if (table.getCurrentRow()) {
              var currentrow = table.getCurrentRow();
              table.tableData = table.tableData.filter(item => item._XID != currentrow._XID);
              table.tableData.push(currentrow);
              this.currentindex = table.tableData.length - 1;
              this.$nextTick(() => {
                  table.setCurrentRow(currentrow);
                  table.scrollToRow(currentrow);
              });
          }
      },
      resort(table) {
          var reg = new RegExp("[0-9]{1,}", "gi");
          var row = table.getCurrentRow();
          table.tableData.sort((a, b) => a._XID.match(reg) - 0 - (b._XID.match(reg) - 0));
          this.$nextTick(() => {
              table.setCurrentRow(row);
              this.currentindex = table.getRowIndex(row);
          });
      }
  }
};
</script>

<style>
</style>
